<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>

	var Person = function (ctx) {
		// 绘制工具
		this.ctx = ctx || document.querySelector('canvas').getContext('2d');
		// 图片路径
		this.src = 'image/04.png';
		// 画布的大小
		this.canvasWidth = this.ctx.canvas.width;
		this.canvasHeight = this.ctx.canvas.height;
		
		// 行走相关参数
		this.stepSzie = 10;
		/* 0 前  1 左  2 右  3 后  和图片的行数包含的图片对应上*/
		this.direction = 0;
		// x轴方向的偏移步数
		this.stepX = 0;
		// y轴方向的偏移步数
		this.stepY = 0;
		
		// 初始化方法
		this.init();
	};
	Person.prototype.init = function () {
		var that = this;
		// 1.图片加载
		this.loadImage(function(image) {
			// 图片的大小
			that.imageWidth = image.width;
			that.imageHeight = image.height;
			// 人物的大小
			that.personWidth = that.imageWidth / 4;
			that.personHeight = that.imageHeight / 4;
			// 绘制图片的起点
			that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
			that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
			// 2.默认绘制在中心位置正面朝外
			that.ctx.drawImage(image,
			0,0,
			that.personWidth,that.personHeight,
			that.x0,that.y0,
			that.personWidth,that.personHeight);
			// 3.能通过方向键去控制人物行走
			that.index = 0;
			document.onkeydown = function (e) {
				if(e.keyCode == 40){
					that.direction = 0;
					that.stepY ++;
					that.drawImage(image);
					// 前
				}else if(e.keyCode == 37){
					that.direction = 1;
					that.stepX --;
					that.drawImage(image);
					// 左
				}else if(e.keyCode == 39){
					that.direction = 2;
					that.stepX ++;
					that.drawImage(image);
					// 右
				}else if(e.keyCode == 38){
					that.direction = 3;
					that.stepY --;
					that.drawImage(image);
					// 后
				}
			}
		});
	}
	// 加载图片
	Person.prototype.loadImage = function (callback) {
		var image = new Image();
		image.onload = function() {
			callback && callback(image);
		};
		image.src = this.src;
	};
	// 绘制图片
	Person.prototype.drawImage = function (image) {
		this.index ++;
		// 清除画布
		this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);
		// 绘图
		// 在精灵图上的定位 x 索引
		// 在精灵图上的定位 y 方向
		this.ctx.drawImage(image,
		this.index * this.personWidth,this.direction * this.personHeight,
		this.personWidth,this.personHeight,
		this.x0 + this.stepX * this.stepSzie,this.y0 + this.stepY * this.stepSzie,
		this.personWidth,this.personHeight);
		// 如果索引超出了 变成 0
		if(this.index >= 3){
			this.index = 0;
		}
	};
	new Person();
</script>
</body>
</html>